<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
    <!-- Dropdownhover CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-dropdownhover.min.css" type="text/css">
    <!-- latest fonts awesome -->
    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css" type="text/css">
    <!-- simple line fonts awesome -->
    <link rel="stylesheet" href="assets/simple-line-icon/css/simple-line-icons.css" type="text/css">
    <!-- stroke-gap-icons -->
    <link rel="stylesheet" href="assets/stroke-gap-icons/stroke-gap-icons.css" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/slider.css" type="text/css">
    <!--  baguetteBox -->
    <link rel="stylesheet" href="assets/css/baguetteBox.css">
    <!-- Owl Carousel Assets -->
    <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 导入页眉 -->
<div class="header"></div>
<!-- newsletter -->
<section class="grid-shop">
    <!-- .grid-shop -->
    <div class="container">
        <div  id="vue"  class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Library</li>
                </ol>
            </div>
            <div class="col-md-3">
                <div class="weight">
                    <div class="title">
                        <h2>Categories</h2>
                    </div>
                    <div class="product-categories">
                        <ul>
                            <li><a href="#">Laptop & Computer <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                            </li>
                            <li><a href="#">Accessories <span><i class="fa fa-angle-right"
                                                                 aria-hidden="true"></i></span></a></li>
                            <li><a href="#">Gaming <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                            </li>
                            <li><a href="#">Mac Computers <span><i class="fa fa-angle-right"
                                                                   aria-hidden="true"></i></span></a></li>
                            <li><a href="#">Ultrabooks <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                            </li>
                            <li><a href="#">Printers & Ink <span><i class="fa fa-angle-right"
                                                                    aria-hidden="true"></i></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="weight">
                    <div class="title">
                        <h2>filter by price</h2>
                    </div>
                    <div class="filter-outer">
                        <h3>Price</h3>
                        <!-- Bootstrap Pricing Slider by ZsharE -->
                        <div class="button-slider">
                            <div class="btn-group">
                                <div class="btn btn-default">
                                    <p>Range: <strong>$<span id="sliderValue">100.0</span></strong> - <strong>$<span
                                            id="sliderValue2">1.700.00</span></strong></p>
                                    <input id="bootstrap-slider" data-slider-min="1" data-slider-max="1700"
                                           data-slider-step="1" data-slider-value="100" type="text">
                                    <div class="valueLabelblck">Filter</div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Bootstrap Pricing Slider by ZsharE -->
                        <div class="brands">
                            <h3>Brands</h3>
                            <ul>
                                <li><a href="#">Black <span>(10)</span></a></li>
                                <li><a href="#">White <span>(13)</span></a></li>
                                <li><a href="#">Blue <span>(05)</span></a></li>
                                <li><a href="#">Red <span>(87)</span></a></li>
                                <li><a href="#">Screen <span>(40)</span></a></li>
                            </ul>
                        </div>
                        <div class="color">
                            <h3>Color</h3>
                            <ul>
                                <li><a href="#" class="color-1"><span></span></a></li>
                                <li><a href="#" class="color-2"><span></span></a></li>
                                <li><a href="#" class="color-3"><span></span></a></li>
                                <li><a href="#" class="color-4"><span></span></a></li>
                                <li><a href="#" class="color-5"><span></span></a></li>
                                <li><a href="#" class="color-6"><span></span></a></li>
                                <li><a href="#" class="color-7"><span></span></a></li>
                            </ul>
                        </div>
                        <div class="size">
                            <h3>Size</h3>
                            <ul>
                                <li><a href="#">L </a></li>
                                <li><a href="#">M </a></li>
                                <li><a href="#">S </a></li>
                                <li><a href="#">XL</a></li>
                                <li><a href="#">XXL</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="weight">
                    <div class="title">
                        <h2>Compare products</h2>
                    </div>
                    <div class="ads-lft">
                        <p>You have no item to compare. </p> <img src="assets/images/add-banner2.jpg" alt="add-banner2">
                    </div>
                </div>
                <div class="weight">
                    <div class="title">
                        <h2>BEST PRODUCTS</h2>
                    </div>
                    <div class="toprating-box">
                        <ul>
                            <li>
                                <div class="e-product">
                                    <div class="pro-img"><img src="assets/images/products/digital/5.jpg" alt="2"></div>
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$200.00 </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="e-product">
                                    <div class="pro-img"><img src="assets/images/products/digital/9.jpg" alt="2"></div>
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$29.00 </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="e-product">
                                    <div class="pro-img"><img src="assets/images/products/digital/12.jpg" alt="2"></div>
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--从这里开始-->
            <div class="col-md-3" v-for="list in list">
                <!-- .pro-text -->
                <div class="pro-text text-center" >
                    <!-- .pro-img -->
                    <div class="pro-img"><img :src="list.headUrl" style="height: 270px" alt="2"> <sup
                            class="sale-tag">sale!</sup>
                        <!-- .hover-icon -->
                        <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                class="icon icon-Restart"></span></a></div>
                        <!-- /.hover-icon -->
                    </div>
                    <!-- /.pro-img -->
                    <div class="pro-text-outer">
                        <span>{{list.name}}</span>
                        <a href="#">
                            <h4>{{list.content}}</h4>
                        </a>
                        <p class="wk-price">{{list.currentPrice}} </p> <a href="#" class="add-btn">Add to cart</a>
                    </div>
                </div>
                <!-- /.pro-text -->
            </div>


                <div class="col-xs-12">
                    <div class="grid-spr pag">
                        <!-- .pagetions -->
                        <div class="col-xs-12 col-sm-6 col-md-6 text-left">
                            <ul class="pagination">
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                        </div>
                        <!-- /.pagetions -->
                        <!-- .Showing -->
                        <div class="col-xs-12 col-sm-6 col-md-6 text-right">
                            <strong>Showing 1-12 <span>of 30 relults</span></strong>
                        </div>
                        <!-- /.Showing -->
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- /.grid-shop -->
</section>
<!-- newsletter -->
<!-- 导入页脚 -->
<div class="footer"></div>
<!-- sticky-socia -->
<aside id="sticky-social">
    <ul>
        <li><a href="#" class="fa fa-facebook" target="_blank"><span><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</span></a>
        </li>
        <li><a href="#" class="fa fa-twitter" target="_blank"><span><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</span></a>
        </li>
        <li><a href="#" class="fa fa-rss" target="_blank"><span><i class="fa fa-rss" aria-hidden="true"></i> RSS</span></a>
        </li>
        <li><a href="#" class="fa fa-pinterest-p" target="_blank"><span><i class="fa fa-pinterest-p"
                                                                           aria-hidden="true"></i> Pinterest</span></a>
        </li>
        <li><a href="#" class="fa fa-share-alt" target="_blank"><span><i class="fa fa-share-alt" aria-hidden="true"></i> Flickr</span></a>
        </li>
    </ul>
</aside>
<!-- /sticky-socia -->
<p id="back-top"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></p>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-dropdownhover.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- owl carousel -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!--  Custom Theme JavaScript  -->
<script src="assets/js/filter-price.js"></script>
<script src="assets/js/custom.js"></script>
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
</body>

</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });

    var vm = new Vue({
        el: '#vue',
        data: {
            list: [],

        },
        methods: {
            showzenith: function () {
                let url = "/showzenith";
                let thisObj=this;
                doGet(url, function (data) {
                    thisObj.list=data;
                    log.constructor(data)
                });
            },
        },
        mounted: function () {
            this.showzenith();
        }
    })


    /*退出登录*/
    function loginout() {
        let url = "/loginpassout";
        doGet(url, function () {
            location.href = "index.html";
            alert("退出登录成功");
        });

    }


    //判断用户有没有登录
    function checklogin() {
        let url = "/checkuser";
        doGet(url, function () {
            location.href = "loginpass.html";
        });

    }


</script>